<template>
  <div class="role-manage-container">
    <xTable :tableConfig="tableConfig">
      <template #operation="scoped">
        <a-button type="text" @click="handleEditRole(scoped.record)">编辑菜单</a-button>

      </template>
    </xTable>

    <menuTreeTableDialog v-model:visible="dialogVisiable" :roleInfo="currentRoleInfo"></menuTreeTableDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import xTable, { useTable } from '@/components/common/x-table'
import type { TableData,TableColumnData } from '@arco-design/web-vue'
import { random } from 'lodash'
import RoleApi from '@/api/system/role/RoleApi'
import dayjs from 'dayjs'
import menuTreeTableDialog from '@/components/system/role/menuTreeTableDialog.vue'

let [configRef,getTableData]=  useTable(
    {
      columns: [
        {
          title: '角色名称',
          dataIndex: 'roleName'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
           render: ({column,record}: {
            record: TableData;
            column: TableColumnData;
            rowIndex: number;
          }) => {
            let value=record[column.dataIndex as string]
       
            return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          slotName: 'operation'
        }
      ],
      data: [],
      pagination: {}
    },
    formatSearchResult
  )

let tableConfig = ref(
  configRef
)

function formatSearchResult(pageSize: number, current: number): Promise<{ total: number; data: TableData[] }> {
  return RoleApi.getAllRoleList(current, pageSize).then(res => {
    if (res.code == 200) {
      return {
        total: res.data.total,
        data: res.data.list
      }
    } else {
      return {
        total: 0,
        data: []
      }
    }
  })
}

getTableData()

// ------------------------------编辑角色菜单start-----------------------------
let dialogVisiable=ref(false)
let currentRoleInfo=ref<SysType.RoleInfo|null>()
function handleEditRole(row:SysType.RoleInfo){

  currentRoleInfo.value=row

  dialogVisiable.value=true
}

// ------------------------------编辑角色菜单end-----------------------------
</script>
<style scoped lang="scss">
.role-manage-container {
  width: 100%;
  padding: 6px 0px;
}
</style>
